<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			td {
				background-color: red
			}
			
			.tdcolor {
				background-color: white;
			}
			
			#mein {
				margin: 0px auto;
				border: 5px solid salmon;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 20px;
				color: #FF0000;
				display: none;
			}
		</style>
	</head>

	<body>

		<table align="center" id="table" width="300" height="300" border="1" cellspacing="0" cellpadding="0">
			<tbody>

			</tbody>
		</table>
		<div id="mein">恭喜过关</div>
		<script type="text/javascript">
			var table = document.getElementById("table")
			var tds;
			var num = 3
			createTable(num)

			function createTable(num) {
				table.innerHTML = ""
				for(i = 0; i < num; i++) {
					var row = table.insertRow();
					for(k = 0; k < num; k++) {
						var cell = row.insertCell()
					}

				}
				tds = table.getElementsByTagName("td")
				for(var i = 0; i < tds.length; i++) {

					tds[i].onclick = function() {

						var rowindex = this.parentNode.rowIndex //					console.log(this.parentNode.rowIndex)
						var cellindex = this.cellIndex
							//					console.log(tds.parentNode.rowIndex)
						for(var i = 0; i < tds.length; i++) {
							if(tds[i].cellIndex == cellindex || tds[i].parentNode.rowIndex == rowindex) {
								if(tds[i].className) {
									tds[i].className = "";
								} else {
									tds[i].className = "tdcolor"
								}
							}
						}
						classFull();
					}
				}
			}

			function classFull() {
				var full = true
				for(var i = 0; i < tds.length; i++) {
					if(tds[i].className == "") {
						full = false;
						break;
					}
				}
				if(full) {
					document.getElementById("mein").style.display = "block"
					setTimeout(function() {

						createTable(4)
						document.getElementById("mein").style.display = "none"
					}, 1000)

				}

			}
		</script>
	</body>

</html>